@extends('admin.layouts.base')
@section('content')
    <div>
        <el-col :span="4">

            <el-button type="text" size="small" @click="add">添加</el-button>
        </el-col>
        <el-col :span="24">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="id" label="id"></el-table-column>
                <el-table-column prop="name" label="分类名称"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="update(scope.row)" type="text" size="small">
                            修改
                        </el-button>
                        <el-button type="text" size="small" @click="handleDelete(scope.row.id)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background layout="prev, pager, next" :total="total" @current-change="handlePageChange"
                           :page-size="15"></el-pagination>
        </el-col>
    </div>
@endsection
@section('scripts')
    <script>
        new Vue({
            el: '#app',
            data: function () {
                return {
                    tableData: [],
                    visible: {
                        add: false,
                    },
                    filter: {
                        page: 1,
                    },
                    total: 0,
                    form: {
                        name: '',
                        // region: '',
                        // date1: '',
                        // date2: '',
                        // delivery: false,
                        attrs: [],
                        // resource: '',
                        // desc: ''
                    }
                }
            },
            methods: {
                handleDelete(categoryId) {
                    this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        let self = this;
                        axios.post('{{route('admin.category.destroy')}}', {'category_id': categoryId}).then(function (res) {
                            self.$message(res.data.msg);
                            self.getLists();
                        });

                    }).catch(() => {
                    });
                },
                add() {
                    let self = this;
                    this.$prompt('请输入分类名称', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
                        // inputErrorMessage: '邮箱格式不正确'
                    }).then(({value}) => {
                        axios.post('{{route('admin.category.store')}}', {name: value}).then(function (res) {
                            if (res.data.status !== 0) {
                                return self.$message({
                                    type: 'success',
                                    message: res.data.msg
                                });
                            }
                            self.getLists();
                        })

                    }).catch(() => {
                        // this.$message({
                        //     type: 'info',
                        //     message: '取消输入'
                        // });
                    });
                },
                update(row) {
                    let self = this;
                    this.$prompt('请输入分类名称', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputValue: row.name,
                        // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
                        // inputErrorMessage: '邮箱格式不正确'
                    }).then(({value}) => {
                        axios.post('{{route('admin.category.update')}}', {
                            name: value,
                            id: row.id
                        }).then(function (res) {
                            if (res.data.status !== 0) {
                                return self.$message({
                                    type: 'success',
                                    message: res.data.msg
                                });
                            }
                            self.getLists();
                        })

                    }).catch(() => {
                        // this.$message({
                        //     type: 'info',
                        //     message: '取消输入'
                        // });
                    });
                },
                getLists() {
                    let self = this;
                    axios.post('{{route('admin.category.list')}}', this.filter).then(function (res) {
                        if (res.data.status !== 0) {
                            self.$message('s');
                        } else {

                            self.tableData = res.data.data.data;
                            self.filter.page = res.data.data.current_page;
                            self.total = res.data.data.total;
                        }
                    })
                },
                handlePageChange(e) {
                    this.filter.page = e;
                    this.getLists();
                },
                handleShip(row) {

                    let self = this;
                    axios.post('{{route('admin.order.ship')}}', {
                        order_id: row.order_id
                    }).then(function (res) {
                        if (res.data.status !== 0) {
                            self.$message.error(res.data.msg);
                        } else {
                            self.$message('操作成功');
                            self.getLists();
                        }
                    })
                },
                getOrderStateCn(state) {
                    if (state === 1) {
                        return '待支付';
                    }
                    if (state === 2) {
                        return '待发货';
                    }
                    if (state === 3) {
                        return '待收货';
                    }
                    if (state === 4) {
                        return '已完成';
                    }
                }
            },
            mounted() {
                this.getLists();
            }
        })
    </script>
@endsection
